import {useSelector,useDispatch} from 'umi'
import {useEffect,useState} from 'react';
import styles from './visit.less';
import { Button, Form ,Input, Table,Popconfirm, message,Switch, Space} from 'antd';
import { objs } from '@/utils/searchs';
export default function search(){
    let indexModu = useSelector(state=>state.visit);
    let [selectedRowKeys,setselect] = useState([]);
    let [loading,setloading] = useState(false);
    let [flag,setflag] = useState(false);
    let dispatch = useDispatch();
    useEffect(()=>{
       dispatch({
         type:'visit/vist',
       })
    },[])
    const onFinish = (values: any) => {
        console.log(values)
      dispatch({
        type:'visit/vist',
        payload:{
         ip:values.ip,
         browser:values.browser,
         engine:values.engine,
         os:values.os,
         device:values.device,
         userAgent:values.userAgent,
         url:values.url,
         address:values.address
        } 
      })
    };
    const columns = [
      {
        title: 'URL',
        dataIndex: 'url',
      },
      {
        title: 'IP',
        dataIndex: 'ip',
      },
      {
        title: '浏览器',
        dataIndex: 'browser',
      },
      {
        title: '内核',
        dataIndex: 'engine',
      },
      {
        title: '操作系统',
        dataIndex: 'os',
      },
      {
        title: '设备',
        dataIndex: '',
      },
      {
        title: '地址',
        dataIndex: 'address',
      },
      {
        title: '访问量',
        render:(row:any)=>{
            return <span className={styles.spa}>{row.count}</span>
          }
      },
      {
        title: '访问时间',
        dataIndex: 'createAt',
      },
      {
        title:'操作',
        render:(row:any)=>{
          return  <Popconfirm
          title="确认删除这个搜索记录？"
          onConfirm={()=>confirm(row)}
          onCancel={cancel}
          okText="确认"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
          
          // <span className={styles.re} onClick={()=>rem(row.id)}>删除</span> 
        
        }
      }
    ];
    const data = [];
    for (let i = 0; i < 46; i++) {
    data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
};
    function confirm(row:any) {
      console.log(row.id);
      dispatch({
        type:'visit/det',
        payload:{
          id:row.id
        }
      })
      message.warning('访客无权进行该操作');
    }
    function con(){
      message.warning('访客无权进行该操作');
    }
    function reset(){
      dispatch({
        type:'visit/vist',
      })
    }
    
    function cancel(e:any) {
      console.log(e);
      message.error('Click on No');
    }
    function start(){
      setloading(true)
      // ajax request after empty completing
    };
    const hasSelected = selectedRowKeys.length > 0;

    const rowSelection = {
      onChange: (selectedRowKeys:any)=>{
        console.log(`selectedRowKeys:${selectedRowKeys}`)
        console.log();
        if(selectedRowKeys.length){
            setflag(true)
        }else{
            setflag(false)
        }
      }
    };
      return (
        <div>
        <div className={styles.box}>
        <div>
            
        </div>
        <Form  onFinish={onFinish}>
       <div className={styles.it}>
   <Form.Item
        label="IP:"
        name="ip"
        rules={[{ required: true, message: '请输入IP地址' }]}
      >
        <Input  placeholder='请输入IP地址' />
      </Form.Item>   </div>
    
    <div className={styles.it}>
      <Form.Item
        label="UA:"
        name="userAgent"
        rules={[{ required: true, message: '请输入UA' }]}
      >
        <Input  placeholder='请输入UA' />
      </Form.Item>
</div>
 <div className={styles.it}>
      <Form.Item
        label="URL:"
        name="url"
        rules={[{ required: true, message: '请输入URL' }]}
      >
        <Input  placeholder='请输入URL' />
      </Form.Item></div>
      <div className={styles.it}>
      <Form.Item
        label="地址:"
        name="address"
        rules={[{ required: true, message: '请输入地址' }]}
      >
        <Input  placeholder='请输入地址' />
      </Form.Item>
     </div>
     <div className={styles.it}>
      <Form.Item
        label="浏览器"
        name="browser"
        rules={[{ required: true, message: '请输入浏览器' }]}
      >
        <Input  placeholder='请输入浏览器' />
      </Form.Item></div>
      <div className={styles.it}>
      <Form.Item
        label="内核:"
        name="engine"
        rules={[{ required: true, message: '请输入内核' }]}
      >
        <Input  placeholder='请输入内核' />
      </Form.Item></div>
      <div className={styles.it}>
      <Form.Item
        label="OS"
        name="os"
        rules={[{ required: true, message: '请输入os' }]}
      >
        <Input  placeholder='请输入os' />
      </Form.Item></div>
      <div className={styles.it}>
      <Form.Item
        label="设备"
        name="device"
        rules={[{ required: true, message: '请输入设备' }]}
      >
        <Input  placeholder='请输入设备' />
      </Form.Item></div>
      <div className={styles.btn}>
      <Button type='primary' htmlType='submit'>搜索</Button>
      <Button htmlType="reset" onClick={()=>reset()}>重置</Button>  
        </div> 
        </Form>
        </div>
        <div className={styles.box2}>
          
        <div>
        <div style={{ marginBottom: 16 }}>
         {flag?<Button type="primary" disabled={hasSelected} onClick={start} >
          <Popconfirm
          title="确认删除这个搜索记录？"
          onConfirm={con}
          onCancel={cancel}
          okText="确认"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
          </Button>:null}
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        {indexModu.list.data &&<Table rowKey="id"  rowSelection={rowSelection} dataSource={indexModu.list.data[0]} columns={columns} /> } 
      </div>


        </div>
        </div>
      );
}
